<template>
    <div class="width-100 height-100 menu-nav flex flex-direction-column overflow-hidden" :class="{ 'menu-auto': isOpen }">
        <slot name="navTop" />
        <div class="flex-1 menu-nav-content animate__animated animate__bounceInLeft">
            <el-menu class="el-menu-vertical-demo" active-text-color="#ffd04b" text-color="#bfcbd9"
                background-color="#304156" :collapse="isOpen" router @select="handleSelect" :default-active="activePath"
                :default-openeds="defaultOpeneds">
                <template v-for="item in menuList" :key="item.path">
                    <!-- 递归循环菜单 -->
                    <menu-item :item="item"></menu-item>
                </template>
            </el-menu>
        </div>
    </div>
</template>

<script setup>
import menuItem from "./menu-item.vue"
//引入store
import { useStore } from '@/store/index.js'
import { storeToRefs } from 'pinia';//实现仓库数据双向绑定
const store = useStore();//创建仓库对象
const router = useRouter();
const activePath = ref('')
const defaultOpeneds = ref([])
const menuList = ref(store.menuList)//菜单栏
const defaultActive = ref('')
// 收起 展开  利用计算属性
const isOpen = computed(() => {
    let { isCollapse } = storeToRefs(store);//解构赋值，数据双向绑定，关联store
    return isCollapse.value
})
// 监听当前路由
watch(
    () => router.currentRoute.value,
    (val) => {
        let list = toRaw(store.menuList)
        defaultActive.value = val.path
        deRepeat(list, val.path)
        activePath.value = val.path //选中标签

    },
    { immediate: true }
)

// 数据循环遍历
async function deRepeat(list, e, titleList = []) {
    for (let item of list) {
        if (item.path === e) {
            titleList.push(item);
            store.setTitleList(titleList);
            return;
        }
        if (item.children) {
            titleList.push(item);
            await deRepeat(item.children, e, titleList);
            if (titleList.length > 1) {
                return;
            }
            titleList.pop();
        }
    }
}

</script>

<style lang='scss'>
.menu-nav {
    .el-menu {
        border-right: 0;
    }
}
</style>
<style lang="scss" scoped>
.menu-nav {
    width: 210px;
    background-color: #304156;
    transition: 0.7s;
    .menu-nav-content {
        overflow: auto;
    }

    .menu-nav-content::-webkit-scrollbar {
        width: 0;
    }
}

.menu-auto {
    width: 64px;
}
</style>